import styled from 'styled-components'
import { StyledMediaContainer } from '@/style/global'
import all from '@img/all.png'
import brief from '@img/meetingDetail-brief.png'

export const Wrap = styled(StyledMediaContainer)`
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	* {
		box-sizing: border-box;
	}
`
export const BodyWrap = styled.div`
	width: 100%;
	margin: 0 auto;
	text-align: left;
	font-size: 14px;
	color: #545454;
	min-height: 515px;
	border-bottom: 2px solid #949799;
	.meeting_detail_main {
		position: static !important;
		display: inline-block;
		width: 100%;
		position: relative;
		.title {
			left: 0px;
			margin-top: 22px;
			border-bottom: 1px dotted #c7c7c7;
			.text {
				font-size: 14px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 650px;
				display: inline-block;
				// float: left;
				color: #4e4e4e;
				margin-bottom: 13px;
				margin-left: 5px;
			}
			.edit {
				background: url(${all}) no-repeat;
				background-position: -240px -305px;
				height: 30px;
				width: 30px;
				position: relative;
				top: -5px;
				margin-left: 19px;
				display: inline-block;
				cursor: pointer;
			}
			.edit:hover {
				background-position: -270px -305px;
			}
		}
	}
	.info {
		margin: 16px 0px;
		font-size: 12px;
		color: #4e4e4e;
	}
`
export const LineWrap = styled.div`
	width: 100%;
	margin: 0 0 6px 0;
	label {
		width: 20px;
		margin-right: 10px;
		height: 20px;
		display: inline-block;
		position: relative;
		top: 5px;
	}
	&.file {
		height: 40px;
	}
	.datetime-label {
		background: url('')
			no-repeat;
	}
	.VMRName-label {
		background: url('')
			no-repeat;
	}
	.regular-datetime-label {
		background: url('')
			no-repeat;
	}
	.organizer-label {
		background: url('')
			no-repeat;
	}
	.manager-label {
		background: url('')
			no-repeat;
	}
	.shortNO-label {
		background: url('')
			no-repeat;
	}
	.password-label {
		background: url('')
			no-repeat;
	}
	.meetingLive-label {
		background: url('')
			no-repeat;
	}
	.file-label {
		background: url('')
			no-repeat;
	}
	.rooms-label {
		background: url('')
			no-repeat;
	}
	.brief-label {
		background: url(${brief}) no-repeat;
		height: 20px;
		margin-right: 15px;
		position: relative;
		top: 2px;
		float: left;
	}
	& > div {
		display: inline-block;
	}
	.brief {
		display: inline-block;
		width: 705px;
		word-break: break-all;
	}
	.room-info-btn {
		margin-left: 5px;
		color: #007ac0;
		display: inline-block;
		border-bottom: 1px solid #1e94da;
		cursor: pointer;
	}
	.livePassword-wrap {
		display: block;
		margin: 10px 0 5px 30px;
	}
	.qrCodeBase64-wrap {
		margin-left: 30px;
		display: flex;
		width: 150px;
		flex-direction: column;
		align-items: center;
	}
	.qrCodeBase64-img {
		width: 150px;
		height: 150px;
	}
	.copyBtn {
		background: url(${all});
		background-position: -360px -365px;
		display: inline-block;
		line-height: 30px;
		vertical-align: middle;
		height: 30px;
		width: 30px;
		margin: 2px 2px 2px 20px;
		cursor: pointer;
	}
	.copyBtn:hover {
		background-position: -390px -365px;
	}
	// .brief {
	// 	float: left;
	// 	width: 705px;
	// }
	.fileBtn {
		height: 30px;
		width: 30px;
		background: url(${all}) no-repeat scroll 0px -100px transparent;
		background-position: -120px -305px;
		display: inline-block;
		position: absolute;
		margin-left: 10px;
	}
	.fileBtn:hover {
		background-position: -150px -305px;
	}
	.regular-link {
		border-bottom: 1px solid #1e94da;
		color: #007ac0;
		margin-left: 10px;
	}
`
export const PersonWrap = styled.div`
	.notParticipateInPersons,
	.attendingPersons {
		margin-left: 34px;
		margin-top: 15px;
	}
	.list {
		width: 100%;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		max-height: 110px;
		.mt-each {
			height: 55px;
			width: 70px;
			margin-right: 15px;
			float: left;
			text-align: center;
			position: relative;
			left: 28px;
			.mt-each-name {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
			}
		}
	}
	.list.auto {
		overflow-y: auto;
		max-height: inherit;
	}
	.mt-all {
		margin-left: 18px;
		text-decoration: underline;
		color: #2874bb;
		cursor: pointer;
	}
`
export const FootWrap = styled.div``
export const RegWrap = styled.div`
	.participateTypeDialog {
		.participateTypeDialog {
			margin: 5px 15px;
			height: 80px;
			width: 120.33px;
		}
	}
`
export const DetailWrap = styled.div`
	line-height: 1.5;
	text-align: left;
	color: #4e4e4e;
	font-size: 12px;
	max-height: 139px;
	padding: 5px;
	width: 390px;
	border: 1px solid #555555;
	background-color: white;
	padding: 5px;
	overflow-x: hidden;
	overflow-y: auto;
	border-radius: 6px;
	.rooms_dialog_content {
		line-height: 1.5;
		border-spacing: 0;
		border-collapse: collapse;
		text-align: left;
		color: #4e4e4e;
		font-size: 12px;
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		margin-top: 10px 0;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 350px;
		width: 389px;
		.rooms_dialog_num_wrap {
			line-height: 1.5;
			border-spacing: 0;
			border-collapse: collapse;
			text-align: left;
			font-size: 12px;
			box-sizing: content-box;
			margin: 0;
			padding: 0;
			color: #727272;
			margin-left: 5px;
		}
		.rooms_dialog_name_wrap {
			display: flex;
			.rooms_region_data {
				word-wrap: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: normal;
			}
			.rooms_region_name {
				line-height: 1.5;
				font-size: 12px;
				border-spacing: 0;
				color: #333;
				border-collapse: collapse;
				vertical-align: top;
				box-sizing: content-box;
				margin: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: normal;
				word-break: normal;
				padding: 7px 5px;
				text-align: left;
				width: 50%;
			}
			.rooms_room_name {
				line-height: 1.5;
				font-size: 12px;
				border-spacing: 0;
				color: #333;
				border-collapse: collapse;
				vertical-align: top;
				box-sizing: content-box;
				margin: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: normal;
				word-break: normal;
				padding: 7px 5px;
				text-align: left;
				width: 50%;
			}
		}
	}
`
